<template>
  <div class="staff">
    <el-button
      type="primary"
      icon="el-icon-plus"
      style="margin-bottom: 20px"
      @click="add()"
      >添加</el-button
    >
    <el-input placeholder="搜索" v-model="selectInput" clearable class="select" @change="select(selectInput)"></el-input>
    <el-button icon="el-icon-search" circle @click="select(selectInput)"></el-button>
    <el-table
      :data="tableData.records"
      :stripe="true"
      :fixed="true"
      :height="450"
      :current-page="page.currentChange"
      Pagesize="5"
      class="table"
      fit
    >
      <el-table-column prop="id" label="id" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="100"> </el-table-column>
      <el-table-column prop="username" label="用户名" width="100">
      </el-table-column>
      <el-table-column
        prop="password"
        label="密码"
        width="150"
      ></el-table-column>
      <el-table-column
        prop="phone"
        label="电话号码"
        width="120"
      ></el-table-column>
      <el-table-column prop="sex" label="性别" width="50">
        <template slot-scope="scope">
          <p>{{ scope.row.sex == 0 ? "女" : "男" }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="idNumber" label="身份证号码" width="200">
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          {{ scope.row.status == 0 ? "禁用" : "启用" }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"
            icon="el-icon-edit"
            circle
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="handleDelete(scope.$index, scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="dialogTitle == 0 ? '修改员工' : '添加员工'"
      :visible.sync="visible"
      class="dialog"
      width="700px"
      center
    >
      <el-form ref="form" label-width="100px" style="margin-left: 100px">
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="form.username" :disabled="!dialogTitle"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="电话号码">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio v-model="form.sex" label="1">男</el-radio>
          <el-radio v-model="form.sex" label="0">女</el-radio>
        </el-form-item>
        <el-form-item label="身份证号码">
          <el-input v-model="form.idNumber"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio v-model="form.status" :label="1">启用</el-radio>
          <el-radio v-model="form.status" :label="0">禁用</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="change(dialogTitle)">{{
            dialogTitle == 0 ? "修改" : "添加"
          }}</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <div class="page">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="page.total"
        :page-size="page.pageSize"
        :current-page="page.currentChange"
        @current-change="sizeChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "CatcoffeeStaff",

  data() {
    return {
      selectInput:"",
      tableData: [],
      visible: false,
      addData: {},
      passwordsave: "",
      page: {
        pageSize: 5,
        total: 1,
        currentChange: 1,
      },
      form: {
        createTime: "2022-02-15 15:51:20",
        id: "1729491280982884353",
        idNumber: "110101199001010047",
        name: "管理员",
        password: "",
        phone: "13812312312",
        sex: "1",
        status: 1,
        updateTime: "2022-02-17 09:16:20",
        username: "admin",
      },
      isChangePassword: 0,
      dialogTitle: 0,
      dialog: [],
    };
  },
  watch: {},
  mounted() {
    this.select();
    this.getSize();
  },
  methods: {
    /* 
    getSize()获取页面总数toal

     */
    getSize() {
      this.$axios
        .get(
          "/staff/select?page=" +
            this.page.currentChange +
            "&pageSize=" +
            this.page.pageSize
        )
        .then((res) => {
          if (res.data.code == 200) {
            this.page.total = res.data.data.total;
            this.$store.commit("setIsLoad", false);
          }
          this.$store.commit("setIsLoad", false);
        });
    },
    // 获取列表信息，有名字就传名字
    select(name) {
      this.$store.commit("setIsLoad", true);
      this.$axios
        .get(
          "/staff/select?page=" +
            this.page.currentChange +
            "&pageSize=" +
            this.page.pageSize +
            (name == undefined ? "" : "&name=" + name)
        )
        .then((res) => {
          if (res.data.code == 200) {
            this.tableData = res.data.data;
            this.$store.commit("setIsLoad", false);
          } else {
            this.$notify.error({
              title: "错误",
              message: "查询失败，未登录",
            });
          }
        });
    },
    handleEdit(index, row) {
      this.dialogTitle = 0;
      this.visible = true;
      this.form = row;
    },
    handleDelete(index, row) {
      this.$store.commit("setIsLoad", true);
      this.$axios.get("/staff/delete?username=" + row.username).then((res) => {
        if (res.data.code == 200) {
          this.$notify.success({
            message: "删除成功",
          });
        }
        this.select();
        this.getSize();
        this.$store.commit("setIsLoad", false);
      });
    },
    change(id) {
      if (id) {
        this.$store.commit("setIsLoad", true);
        this.$axios
          .post("/staff/add", {
            username: this.form.username,
            password: this.form.password,
            name: this.form.name,
            phone: this.form.phone,
            sex: this.form.sex,
            idNumber: this.form.idNumber,
            status: this.form.status,
          })
          .then((res) => {
            if (res.data.code == 200) {
              this.tableData = res.data.data.records;
              this.$store.commit("setIsLoad", false);
              this.select();
              this.$notify.success({
                title: "成功",
                message: "添加成功！！！",
              });
            } else if (res.data.code == 100) {
              this.$notify.error({
                title: "错误",
                message: "添加失败,已有相同用户",
              });
              this.$store.commit("setIsLoad", false);
            } else {
              this.$notify.error({
                title: "错误",
                message: res.data,
              });
              this.$store.commit("setIsLoad", false);
            }
          });
      } else {
        this.$store.commit("setIsLoad", true);
        this.$axios
          .post("/staff/update", {
            username: this.form.username,
            password: this.form.password,
            name: this.form.name,
            phone: this.form.phone,
            sex: this.form.sex,
            idNumber: this.form.idNumber,
            status: this.form.status,
          })
          .then((res) => {
            if (res.data.code == 200) {
              console.log(res);
              this.$notify.success({
                title: "成功",
                message: "修改成功!",
              });
              this.$store.commit("setIsLoad", false);
              this.select();
              this.getSize();
            } else {
              this.$notify.error({
                title: "修改失败",
                message: res.data,
              });
              this.$store.commit("setIsLoad", false);
            }
          });
      }
      this.visible = false;
      console.log(this.form);
    },
    add() {
      this.dialogTitle = 1;
      this.visible = true;
      this.form = {};
    },
    sizeChange(val) {
      console.log(val);
      this.$axios
        .get("/staff/select?page=" + val + "&pageSize=" + this.page.pageSize)
        .then((res) => {
          this.tableData = res.data.data;
        });
    },
  },
};
</script>

<style scoped>
.staff {
  box-sizing: border-box;
  padding: 20px;
}
.select{
  width: 200px;
  margin: 0 10px 0 30px;
}
.dialog {
  box-sizing: border-box;
}
::v-deep .dialog .el-input__inner {
  width: 300px;
}
.page {
  text-align: center;
  padding-top: 20px;
}
</style>